<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>点名</title>
	<style>
		#div{
			width: 200px;
			height: 150px;
			border: 1px solid blue;
			text-align: center;;
			line-height: 150px;
			font-size: 30px;
			color:  red;
		}
	</style>
</head>
<body>
	<h1>点名</h1>
	<hr>
	<div id="div"></div>
	<button id="btn" onclick="check()">STOP!</button>

	<script>
		var list = ['张三','李四','王五','狗蛋','铁柱','二楞','狗娃','史珍香','王巴丹','哈哈'];
		// console.log(list);
		var div = document.getElementById('div');
		var btn = document.getElementById('btn');
		var n = 0;
		var v = 2;
		console.log(v);
		
		timer = setInterval('run()',50);

		function run(){
			n = Math.floor(Math.random()*10);
			// console.log(n);
			div.innerHTML = list[n];
		}

		function check(){
			if(v == 1){
				btn.innerHTML = 'STOP!';
				timer = setInterval('run()',50);
				v = 2;
			}else if(v == 2){
				btn.innerHTML = 'START!';
				clearInterval(timer);
				v = 1;
			}
		}
	</script>
</body>
</html>